<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
请输入关键字:<input type="text" id="keyword" name="keyword" size="70">
<input type="submit" value="搜一下">
<div id="big" style="display: none;width: 350px;border: 1px solid">

</div>
</body>

<script>

    $(function () {
        $("#keyword").keyup(function () {
            var $keyword = $("#keyword").val();
            if ($.trim($keyword) != "") {
                $.ajax({
                    url: "SouServlet",
                    type: "POST",
                    data: {keyword: $keyword},
                    dataType:"json",
                    success: function (data) {
                        var $big = $("#big");
                        $big.html("");
                        var $sss="";
                        if (data.length>0){
                            $.each(data,function (i,n) {
                                $sss += "<div onmouseover='jingguo(this)' onmouseout='chu(this)' onclick='dian(this)'>";
                                $sss += n;
                                $sss += "</div>";
                                $big.html($sss);
                            })
                            $big.css("display","block");
                        }else{
                            $big.css("display","none");
                        }
                    }
                })
            } else {
                $("#big").css("display", "none");
            }
        });
    });


    function jingguo(obj) {
        obj.style.backgroundColor = "lightblue";
        obj.style.cursor = "pointer";
    }

    function chu(obj) {
        obj.style.backgroundColor = "";
    }

    function dian(obj) {
        document.getElementById("keyword").value = obj.innerHTML;
        document.getElementById("big").style.display = "none";
    }
</script>
</html>
